<!--  -->
<template>
    <div>
        <section class="el-container wrapper is-vertical">
            <header class="el-header head-between" style="height: 80px; background-color: rgb(64, 158, 255);">
                <h3><i class="el-icon-loading"></i>
                    性能分析
                    <!-- <i class="el-icon-loading"></i> -->
                </h3>
                <ul class="header-operations">
                    <li>帮助</li>
                    <li>
                        <el-dropdown split-button type="primary" @click="handleClick">
                            xlei1123
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>退出登录</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                </ul>
            </header>
            <section class="el-container">
                <aside class="el-aside menu" style="width: 300px;margin-top:10px;">
                    <h3 style="padding-left: 20px;font-size:20px">统计</h3>
                    <ul role="menubar" class="el-menu">
                        <li role="menuitem" tabindex="-1" class="el-menu-item " :class="{'is-active': activeLink == 'userData'}" style="padding-left: 30px;" @click="userData">
                            用户分析
                        </li>
                        <li role="menuitem" tabindex="-1" class="el-menu-item"  :class="{'is-active': activeLink == 'interfaceData'}"  style="padding-left: 30px;" @click="interfaceData">
                            接口分析
                        </li>
                        <li role="menuitem" tabindex="-1" class="el-menu-item"  :class="{'is-active': activeLink == 'performance'}" style="padding-left: 30px;" @click="performance">
                            前端网页性能分析
                        </li>
                    </ul>
                </aside>
                <main class="el-main content">
                    <router-view></router-view>
                </main>
            </section>
        </section>
    </div>
</template>

<script>
import mixins from '../mixins'
export default {
    data() {
        return {
            activeLink: 'userData'
        };
    },
    mixins:[mixins],
    components: {},

    computed: {},

    mounted() {
        console.log(this.time)
    },

    methods: {
        userData(){
            this.activeLink = 'userData'
            this.$router.push({
                path:'/index/userData'
            })
        },
        interfaceData(){
            this.activeLink = 'interfaceData'
            this.$router.push({
                path:'/index/interfaceData'
            })
        },
        performance(){
            this.activeLink = 'performance'
            this.$router.push({
                path:'/index/performance'
            })
        },
        handleClick() {
            alert('button click');
        }
    }
};
</script>
<style lang='less' scoped>
    .head-between{
        display: flex;
        justify-content: space-between;
        text-align: center;
        h3{
            line-height: 80px;
            color: #fff;
            font-size: 20px;
        }
        ul{
            display: flex;
            justify-content: space-between;
            text-align: center;
            li{
                margin-left: 20px;
                line-height: 80px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
</style>